
// modal dialog init: custom buttons and a "close" callback reseting the form inside
function onRegisterModuleLoad() {
	var $regsiterModule = $("#registrationModule");
	var $districtList =  $("#districtList",$regsiterModule);
	var $cityList =  $("#cityList",$regsiterModule);	
	var $form_submit_button = $("#submitButton",$regsiterModule);
	var $form = $("#registration_form",$regsiterModule);
	
	$('.datepicker').datepicker({
		changeMonth: true,
		changeYear: true,
		dateFormat: 'mm/dd/yy'
		
	});
	$form.validate({
	  rules: {
		  username: {
		      required: true,
		      remote: "../isuniqueuser"
		    }
	  },
	  messages:{
		  username: {
		      remote: function() { return jQuery.format("UserName is already in use"); }
		    }
	  }
	 });
	
	
	
	$("#stateList").change(function() {
		  // user changed the state. call server to get new district list 
		// remove all the items from the district list
		$districtList.empty();
		$cityList.empty();
		var stateId = $(this).attr('value');;
			
		$.getJSON('http://localhost:8080/smartbillpay/public/locations/districts/state/' +stateId , function(data) {
			  var index =0;
			  $.each(data, function(key, val) {
				  $districtList.append(new Option(val.name, val.id ));
				  if(index == 0) {
					  onDistrictChange(val.id);
				  };
				  index++;
			  });

			});
				
		});
	
	$districtList.change(function() {
		alert("district chagne event");
		onDistrictChange($(this).attr('value'));
				
		});
	
	// registration dialog
	var $registration_dialog = $( "#registration_dialog" ).dialog({
		autoOpen: false,
		modal: true,
		autoOpen: false,
		width: 400,
		buttons: {
			
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		open: function() {
			// submit the form
			 $.post("",$form.serialize(), function(data) {
		   		  if(data.status == "Success"){
		   			  $(".ajaxLoading").remove();
					  $("#regstrationStatus").text("Submitted form successfully!!");
					  
					  var url = document.location.toString() ; //url
						var e_url = '' ; //edited url
						var p = 0 ; //position
						var p2 = 0 ;//position 2
						p = url.indexOf("//") ;
						e_url = url.substring(p+2) ;
						p2 = e_url.indexOf("/") ;
						var root_url = url.substring(0,p+p2+3);
						root_url =root_url + "/smartbillpay/login";
						
					  $( "#registration_dialog" ).append("<p>click here to <a href=\""+root_url+"\">login</a></p>");
					      }
		      else {		    	  
		    	  $("#regstrationStatus").text(data.errorMap.errorMessage);
		      }					   	  
		    }, "json");
			 
		},
		close: function() {
			
		}
	});
	
	// form submit event
	$form_submit_button.click(function(event){
		alert("inside submit click");
		event.preventDefault();
		 if($form.valid()){
			 alert("form is valid");
			 $form_submit_button.attr("disabled", "disabled");
				
			 $registration_dialog.dialog('open');
			
			
		   	
		 }
		 else {
			 alert("form is invalid");
			 return false;
		 }
			 
	});
	
	
};

function onDistrictChange(districtId){
	var $cityList =  $("#cityList");
	$cityList.empty();
		
	$.getJSON('http://localhost:8080/smartbillpay/public/locations/city/district/' +districtId , function(data) {
		 
		  $.each(data, function(key, val) {
			  $cityList.append(new Option(val.name, val.id ));
		  });

		});
};